<template>
  <div class="biejing">
    <div class="login" v-show="deng">
      <div class="tupian">
        <img src="../layout/zk/img/denglu-chahua_03.png" alt />
      </div>
      <div class="text">欢迎来到飞翔</div>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item>
          <el-input placeholder="请输入账户" v-model="ruleForm.val" prop="val"></el-input>
          <img src="../layout/zk/img/手机.png" alt class="sji" />
        </el-form-item>
        <el-form-item style="width: 360px">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
            class="el1"
            prop="pass"
            ref="el1"
            placeholder="请输入密码"
          ></el-input>
          <img src="../layout/zk/img/解锁.png" alt class="suo" />
        </el-form-item>
        <p class="pbiao">
          <span style="margin-right: 100px">密码登录</span>
          <span>自动登录</span>
        </p>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
      </el-form>
      <p class="zhzc" @click="zhuce">没有账号？免费注册></p>
    </div>
    <div class="register" v-show="qiehuan">
      <div class="tupian">
        <img src="../layout/zk/img/denglu-chahua_03.png" alt />
      </div>
      <div class="text">欢迎来到飞翔</div>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item>
          <el-input placeholder="请输入账户" v-model="ruleForm.val" prop="val" ref="yhm"></el-input>
          <img src="../layout/zk/img/手机.png" alt class="sji" />
        </el-form-item>
        <el-form-item style="width: 360px">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
            class="el1"
            prop="pass"
            placeholder="请输入密码"
          ></el-input>
          <img src="../layout/zk/img/解锁.png" alt class="suo" />
        </el-form-item>
        <el-form-item style="width: 360px">
          <el-input
            type="password"
            v-model="ruleForm.againpass"
            autocomplete="off"
            ref="el2"
            prop="againpass"
            placeholder="请再次输入密码"
          ></el-input>
          <img src="../layout/zk/img/解锁.png" alt class="suo" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="yanzheng" class="but">下一步</el-button>
        </el-form-item>
        <p class="fanhui" @click="denglu">返回登录</p>
      </el-form>
    </div>
  </div>
</template>

<script>
import even from "../event";
import { logfun, registerfun } from "../api/Login";
import { setToken } from "../utils/cookieUtils";
export default {
  data() {
    var checkAge = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("用户名不能为空"));
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
      // callback();
    };
    return {
      deng: true,
      qiehuan: false,
      ruleForm: {
        pass: "",
        val: "",
        againpass: ""
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        val: [{ validator: checkAge, trigger: "blur" }],
        againpass: [{ validator: validatePass, trigger: "blur" }]
      }
    };
  },
  methods: {
    zhuce() {
      this.deng = false;
      this.qiehuan = true;
    },
    denglu() {
      this.qiehuan = false;
      this.deng = true;
    },
    yanzheng() {
      if (this.$refs.el1.value == this.$refs.el2.value) {
        registerfun({
          val: this.$refs.yhm.value,
          pass: this.$refs.el1.value
        }).then(res => {
          this.qiehuan = false;
          this.deng = true;
        });
      } else {
        alert("两次密码不一样");
      }
    },
    open() {
      this.$confirm("密码或者账号错误", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {});
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          logfun(this.ruleForm).then(res => {
            if (res.code == "200") {
              setToken("token", res.data);
              this.$router.push("/");
              setTimeout(() => {
                even.$emit("name", this.ruleForm.val);
              }, 1000);
            } else {
              this.open();
            }
          });
        } else {
          console.log("账号密码错误");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="less" scoped>
.biejing {
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
  background: url("https://img95.699pic.com/photo/40140/9957.gif_wh860.gif")
    no-repeat;
  background-size: 100%;
  overflow: hidden;
}
.login {
  height: 500px;
  width: 720px;
  background-color: rgba(135, 206, 235, 0.2);
  margin: 150px auto;
  overflow: hidden;
  position: relative;
  border-radius: 15px;
  > .tupian {
    height: 306px;
    width: 256px;
    margin: 97px 84px;
    display: inline-block;
    > img {
      height: 100%;
    }
  }
  > .zhzc {
    position: absolute;
    bottom: 61px;
    right: 42px;
    font-size: 16px;
    color: #519bfe;
    cursor: pointer;
  }
  > .text {
    position: absolute;
    top: 58px;
    left: 442px;
    font-size: 30px;
    color: #3d8ffd;
  }
  > .demo-ruleForm {
    position: absolute;
    top: 154px;
    right: 42px;
  }
}
.register {
  height: 500px;
  width: 720px;
  background-color: rgba(135, 206, 235, 0.2);
  margin: 150px auto;
  overflow: hidden;
  position: relative;
  border-radius: 15px;
  > .tupian {
    height: 306px;
    width: 256px;
    margin: 97px 84px;
    display: inline-block;
    > img {
      height: 100%;
    }
  }
  > .zhzc {
    position: absolute;
    bottom: 61px;
    right: 42px;
    font-size: 16px;
    color: #519bfe;
    cursor: pointer;
  }
  > .text {
    position: absolute;
    top: 58px;
    left: 442px;
    font-size: 30px;
    color: #3d8ffd;
  }
  > .demo-ruleForm {
    position: absolute;
    top: 154px;
    right: 42px;
  }
}
.el-input--small .el-input__inner {
  height: 40px;
}
.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 20px;
}
.el-button {
  width: 260px;
  height: 40px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}
.el-input__inner {
  padding: 0px 42px;
}
.sji,
.suo {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 12px;
  left: 16px;
}

.pbiao {
  margin: 0px 0px 20px 100px;
  font-size: 16px;
  color: #519bfe;
  > span {
    cursor: pointer;
  }
}
.el-message-box {
  height: 200px;
  background: url("https://img.zcool.cn/community/0159a65c45345ea801213f2625cde0.png@1280w_1l_2o_100sh.png")
    no-repeat;
  background-size: 100%;
}
.el-message-box__btns button:nth-child(1) {
  display: none;
}
.el-message-box__btns button:nth-child(2) {
  margin-right: 66px;
  margin-top: 40px;
}
.el-message-box__status::before {
  padding-left: 1px;
  margin-left: 114px;
}
.el-message-box__message {
  text-align: center;
  color: #fff;
}
.el-message-box__title,
.el-message-box__close {
  color: #fff !important;
}
.but {
  margin-top: 30px !important;
}
.fanhui {
  margin: 50px 0px 0px 100px;
  font-size: 16px;
  color: #519bfe;
  cursor: pointer;
}
</style>
